<template>
	<view class="withdraw">
		<!-- 顶部可提现提示 -->
		<view class="hint card">
			<view class="hint-left">
				<input class="amount-input" type="digit" v-model="amount" :placeholder="`请输入提现金额；最多可提 ${balanceDisplay}`" @input="onAmountInput" confirm-type="done" maxlength="12" />
			</view>
			<view class="hint-right" @click="withdrawAll">全部提现</view>
		</view>

		<!-- Tip -->
		<view class="tip">Tip：申请成功后审核成功即到微信零钱，如未到账请联系客服</view>

		<!-- 主按钮 -->
		<view class="cta-wrap">
			<button class="cta-btn" @click="submitWithdraw">提现到零钱</button>
		</view>

		<!-- 记录表头 -->
		<view class="table card">
			<view class="thead">
				<view class="th">时间</view>
				<view class="th amount">金额</view>
				<view class="th status">状态</view>
			</view>
			<view class="tbody" v-if="records.length === 0">
				<view class="empty">我到底了～</view>
			</view>
			<view class="tbody" v-else>
				<scroll-view  scroll-y @scrolltolower="scrolltolower">
					<view class="tr" v-for="(record, i) in records" :key="i">
						<view class="td">{{ record.createTime }}</view>
						<view class="td">{{ record.price / 100 }}</view>
						<view class="td">{{ record.statusName }}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	const url = 'https://m.nangua.website'
	// const url = 'https://tg.whtxqp.com'
	// const url = 'http://e6acb8bb.natappfree.cc'
	export default {
		data() {
			return {
				balance: 0,
				amount: '',
				records: [],
				params: {
					pageNo: 1,
					pagesize: 100
				},
				maxpage: 1,
				balanceDisplay: 0
			}
		},
		onShow(){
			this.fetchBalance()
			this.fetchRecords()
		},
		methods: {
			
			fetchBalance(){
				uni.showLoading({
					title: '加载中...'
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 1000)
				uni.request({
					url: url + '/app-api/trade/brokerage-user/get-summary',
					method: 'GET',
					header: { 'Authorization': `Bearer ${uni.getStorageSync('token') || ''}` },
					success: (res)=>{
						console.log(res, 'res---')
						const amount = res.data.data.brokeragePrice
						this.balanceDisplay = amount / 100
					}
				})
			},
			scrolltolower() {
				this.params.pageNo++
				this.fetchRecords()
			},
			fetchRecords(){
				if (this.params.pageNo > this.maxpage) {
					return uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					})
				}
				uni.showLoading()
				uni.request({
					url: url + "/app-api/trade/brokerage-withdraw/page",
					method: "GET",
					header: {
					    "Authorization": `Bearer ${uni.getStorageSync('token')}`
					},
					data: this.params,
					success: (res) => {
						uni.hideLoading()
						console.log(res, '----提现记录')
						if(res.data.code == 0) {
							this.maxpage = Math.ceil(res.data.data.total / this.params.pageSize)
							this.records = this.records.concat(res.data.data.list)
						}
						else if (res.data.code == 401) {
							uni.showToast({
								title: '登录失效，请重新登录',
								icon: 'none'
							})
							uni.removeStorageSync('token')
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			withdrawAll(){
				this.amount = this.balanceDisplay
			},
			formatAmount(n){
				return Number(n || 0).toFixed(2)
			},
			onAmountInput(e){
				// 仅允许数字和最多两位小数
				const raw = (e && e.detail && e.detail.value) || ''
				let sanitized = raw.replace(/[^0-9.]/g, '')
				// 只保留第一个小数点
				sanitized = sanitized.replace(/\.(?=.*\.)/g, '')
				// 限制两位小数
				sanitized = sanitized.replace(/^(\d+)(\.(\d{0,2})?).*$/, (m, i, d, f)=> i + (d ? '.' + (f||'') : ''))
				this.amount = sanitized
			},
			submitWithdraw(){
				let amount = this.amount
				if (amount) {
					amount = parseFloat(this.amount)
					amount = amount.toFixed(2)
					amount = amount * 100
				}
				if (amount > this.balanceDisplay * 100) {
					return uni.showToast({
						title: '不能超过佣金余额',
						icon: 'none'
					})
				}
				uni.request({
					url: url + "/app-api/trade/brokerage-withdraw/create",
					method: "POST",
					header: {
					    "Authorization": `Bearer ${uni.getStorageSync('token')}`
					},
					data: {
						type: 5,
						price: amount
					},
					success: (data) => {
						if (res.data.code == 0) {
							uni.showToast({ title: '提交成功', icon: 'success' })
							this.params.pageNo = 1
							this.fetchRecords()
						}
						else if (res.data.code == 401) {
							uni.showToast({
								title: '登录失效，请重新登录',
								icon: 'none'
							})
							uni.removeStorageSync('token')
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
.withdraw{padding: 16px;}
.card{background:#fff;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,0.06);}
.hint{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:#e4e4e4;border-radius:14px;color:#8a8f95;margin-bottom:12px;}
.hint-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.amount-input{flex:1;border-radius:10px;height:40px;line-height:40px;padding:0 12px;color:#1f2937;font-size:16px;border:1px solid #e5e7eb;}
.amount-input::placeholder{color:#9ca3af;}
.hint-right{color:#ff4d4f;}
.tip{color:#8a8f95;margin:8px 4px 16px 4px;}
.cta-wrap{display:flex;justify-content:center;}
.cta-btn{width:100%;line-height:56px;height:56px;border:none;border-radius:28px;background:#e02424;color:#fff;font-size:18px;}
.table{margin-top:16px;padding:0;overflow:hidden;}
.thead{display:flex;padding:12px 16px;color:#1f2937;background:#fff;border-bottom:1px solid #f0f0f0;}
.th{flex:1;}
.th.amount{flex:0 0 80px;text-align:center;}
.th.status{flex:0 0 80px;text-align:right;}
.tbody{background:#fff;}
.empty{padding:24px;text-align:center;color:#8a8f95;}
.tr{display:flex;padding:12px 16px;border-bottom:1px solid #f5f5f5;}
.td{flex:1;color:#4b5563;}
.td.amount{flex:0 0 80px;text-align:center;}
.td.status{flex:0 0 80px;text-align:right;}
</style>
